<template>
	<view class="shopPingMall">
		<view class="topBack">
			<view class="shwop-head">
				<view class="searchDiv">
					<view class="search">
						<u-input class="uinput" @confirm="searchFun" :clearable="false" placeholder="搜索宠物“粮食”、“零食”等"
							v-model="searchData"></u-input>
						<text class="reset" @click="handleRest">重置</text>
					</view>
					<image class="searchImg"
						src="https://chongwu.aitaoba.net/storage/uploads/20231118/30fc7cb0856a266bfdbcf79365eea5fe.png"
						@tap="searchFun"></image>
				</view>
				<view class="navDiv">
					<view class="navItemDiv" v-for="(item,index) in cateList" :key="item.id"
						@tap="activeFun(item,index)" :class="{activeNavItem:pages.cate_id==item.id,width68:item.id==5}">
						<view class="navItemText" :class="{activeText:pages.cate_id==item.id,width68:item.id==5}">
							{{item.title}}
						</view>
						<view class="navItemBottom" :class="{width68:item.id==5}" v-if="pages.cate_id==item.id"></view>
					</view>
				</view>
			</view>
			<!-- 双排瀑瀑流列表 -->
			<!-- <view class="listDiv"></view> -->
			<view class="photo">
				<view class="items" v-for="(item,index) in goodsList" :key="item.id" @tap="goProductDetails(item)">
					<image :src="item.image" mode='widthFix' bindtap="viewImage"></image>
					<view class="itemLiDiv">
						<text class="itemTopText">{{item.title}}</text>
						<text class="itemBottomText">{{item.intro}}</text>
					</view>
				</view>


			</view>
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" class="loadmoreClass" />

		</view>
	</view>
</template>

<script>
	import {
		cateList,
		goodsList
	} from '@/api/shoppingMall.js'
	import {
		nextTick
	} from "vue";
	export default {
		data() {
			return {
				searchData: '',
				cateList: [],
				goodsList: [],
				pages: {
					keyword: '',
					cate_id: null,
					page: 1,
					limit: 10,
				},


				status: 'loadmore',
				iconType: 'circle',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},

			}
		},
		/**
		 * 跳转到个人中心
		 */
		onBackPress(e) {

		},
		onPullDownRefresh() {

		},
		onShow() {
			// 分类列表
			this.getCateList();
			// 商品列表
			this.pages.page = 1;
		},
		onReachBottom() {


			this.pages.page++;
			this.getGoodsList();
		},

		onLoad(options) {

		},

		watch: {

		},
		methods: {
			// 重置
			handleRest() {
				console.log(this.cateList[0].id, 'this.cateListthis.cateListthis.cateList')
				this.searchData = ''
				this.pages = {
					keyword: '',
					cate_id: this.cateList[0].id,
					page: 1,
					limit: 10,
				}
				this.getGoodsList();
				console.log(this.goodsList, 'fffffffff')
			},

			searchFun() {
				this.pages.keyword = this.searchData;
				this.getGoodsList();

			},
			goProductDetails(item) {
				uni.navigateTo({
					url: "/pages/productDetails/productDetails?id=" + item.id
				})
			},
			getCateList() {
				cateList({}).then((res) => {
					console.log(res, '分类列表')
					if (res.code == 200) {
						this.cateList = res.data;
						this.pages.cate_id = this.cateList[0].id
						this.getGoodsList();
					}
				}).catch((res) => {})
			},
			getGoodsList() {
				let data = this.pages;
				goodsList(data).then((res) => {
					console.log(res, '商品列表列表')
					if (res.code == 200) {
						// this.goodsList = res.data.list;
						if (this.pages.page == 1) {
							if (res.data.list.length == 0) {
								this.status = this.loadText.nomore;
							}
							this.goodsList = res.data.list;
						} else if (this.pages.page > 1) {
							if (res.data.list.length == 0) {
								this.status = this.loadText.nomore;
							} else {
								this.goodsList = [...this.goodsList, ...res.data.list]
							}
						}
					}
				}).catch((res) => {})
			},
			activeFun(item, index) {
				this.pages.cate_id = item.id;
				this.pages.page = 1
				this.getGoodsList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shopPingMall {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.topBack {
		width: 750rpx;
		height: 257rpx;
		background: linear-gradient(180deg, #FAE24E 0%, rgba(250, 226, 78, 0) 100%);

	}

	.shwop-head {
		padding: 30rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
	}

	.uinput {
		width: 87%;
		height: 88rpx;
		background: #efefef;
		border-radius: 10rpx;

		border: 2rpx solid #683518;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	.searchDiv {
		// width: 690rpx;
		width: 100%;
		height: 88rpx;
		position: relative;
	}

	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.reset {
		color: #20a1f8;
		font-size: 35upx
	}

	.searchImg {
		width: 42rpx;
		height: 40rpx;
		position: absolute;
		right: 120rpx;
		top: 24rpx;
		z-index: 2;
	}

	.navDiv {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50rpx;
	}

	.navItemDiv {
		min-width: 128rpx;


		height: 45rpx;
		position: relative;


	}

	.activeNavItem {
		min-width: 128rpx;
	}

	.navItemText {
		min-width: 128rpx;


		position: absolute;
		left: 0;
		top: 0;
		z-index: 3;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
	}

	.activeText {
		min-width: 128rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #030303;
	}

	.navItemBottom {
		width: 126rpx;
		height: 9rpx;
		background: linear-gradient(270deg, #EEA92D 0%, #FFE7AD 100%);
		border-radius: 5rpx;
		position: absolute;
		bottom: 2rpx;
		right: 0;
		z-index: 2;

	}

	.minWidth126 {
		min-width: 126rpx;
	}

	.width68 {
		min-width: 68rpx;
	}

	.orderListDiv {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 32rpx 30rpx 293rpx 30rpx;
		box-sizing: border-box;
	}

	.listDiv {
		width: 100%;
		height: 2200rpx;
		display: flex;
		background: red;
	}

	.photo {

		padding: 34rpx 30rpx 50rpx 30rpx;
		column-gap: 0;
		column-count: 2;
		column-gap: 20rpx;
		box-sizing: border-box;

		.items {
			width: 100%;
			break-inside: avoid;
			display: flex;
			flex-direction: column;
			// margin-right: 20rpx;
			margin-bottom: 20rpx;

			image {
				width: 100%;
				border-radius: 20rpx 20rpx 0px 0px;
			}

			.itemLiDiv {
				width: 100%;
				height: auto;
				display: flex;
				flex-direction: column;
				padding: 12rpx 40rpx 14rpx 20rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 0px 0px 20rpx 20rpx;

				.itemTopText {
					width: 275rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #2E2908;
				}

				.itemBottomText {
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #797873;
					margin-top: 10rpx;
					width: 274rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

		}

	}

	.loadmoreClass {
		width: 100vw !important;
	}
</style>